
// 历史样式设计 因为新的设计，逐渐淘汰这些过时的样式


/**
 * 伪装成输入框的 span
 * -------------------------------------------------------
 * 这个设计没啥实际意义，主要为了兼容一些很奇葩的设计，
 * 有些系统会用禁用表单的方式展示数据（原则上来说不允许这样），
 * 为了保持风格一致，可以将 span 做成 input 的样式
 */
.disguise_input {
  -webkit-appearance: none;
  background-color: #FFF;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);

  :hover {
    border: 1px solid #c3c6cb;
  }

  .small {
    height: 32px;
    line-height: 32px;
  }

  .textarea {
    height: 64px;
    line-height: 32px;
  }
}

/**
 * 盒模型间隙
 * --------------------
 * 给组件添加 margin，将元素分隔开，去除最后一个的 margin；
 * 在我们的组件中，大部分都不包含默认边框设计，这个样式会非常有用。
 */
.sea-gap-group {
  > * {
    margin-right: $sea-gap-width;

    &:last-child {
      margin-right: 0;
    }
  }
}

.sea-gap-group-v {
  > * {
    margin-bottom: $sea-gap-height;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.gap-right {
  margin-right: $sea-gap-width;

  &:last-child {
    margin-right: 0;
  }
}

.gap-bottom {
  margin-bottom: $sea-gap-height;

  &:last-child {
    margin-bottom: 0;
  }
}

